{% extends "base-adv.html" %}

{% block title %}{{ artwork.name }} - {{ block.super }}{% endblock %}
{% block description %}
<meta name="description" content="Artwork &quot;{{ artwork.name }}&quot; by {{ artwork.author.nickname }} at Grid Paint.">
{% endblock %}

{% block include_css %}
{{ block.super }}
 <link href="/social-likes/social-likes.css" rel="stylesheet">
{% endblock %}

{% block content %}  

<script src="/social-likes/social-likes.min.js"></script>

<div class="single-container">
<div class="container">
	<div class="image-details-image">
		<img src="{{ artwork.full_image_file_name }}" width="{{ artwork.thumbnail_width }}" height="{{ artwork.thumbnail_height }}">
	</div>
	<div class="image-details-header">
		<div class="pull-right">
			<ul class="social-likes social-likes_vertical">
				<li class="facebook" title="Share link on Facebook">Facebook</li>
				<li class="twitter" title="Share link on Twitter">Twitter</li>
				<li class="plusone" title="Share link on Google+">Google+</li>
				<li class="pinterest" title="Share image on Pinterest" data-media="">Pinterest</li>
			</ul>
		</div>
				
		<h3 id="artwork-name">
			{% if artwork.editor_choice %}
				<img src="/img/editor_choice.png" title="Editor's choice" />
			{% endif %}
			<img src="/img/grid-icons/{{ artwork.grid }}.png" /> {{ artwork.name }}
		</h3>
		<div class="details">
			<small>{{ artwork.date|date:"d M Y H:i" }}</small> by 
			<span class="artist">
				{% if artwork.author %}
				<a href="/profiles/{{ artwork.author.profile_id }}">{{ artwork.author.nickname }}</a>
				{% else %}
				{{ artwork.author.nickname }}
				{% endif %}
			</span>
		</div>
		<div style="white-space: pre;">{{ artwork.description|default_if_none:"" }}</div>
		{% if artwork.tags %}
		<div>
			<i class="icon icon-tag"></i>
			{% for tag in artwork.tags %}
			  <a href="/gallery?q={{ tag.title }}">{{ tag.title }}</a>
			{% endfor %}
		</div>
		{% endif %}		
		
		<div style="clear: both"></div>		
	</div>
	
	<div class="image-details-actions">
		{% if can_edit_artwork %}
		<a href="/painter?id={{ artwork.key.id }}" class="btn btn-sm btn-success" title="Edit image"><i class="icon icon-pencil icon-white"></i> Edit</a>
		<a href="#" image-key="{{ artwork.key.id }}" class="btn btn-sm btn-danger btn-delete-image" title="Delete image"><i class="icon icon-remove icon-white"></i> Delete</a>		
		{% endif %}
		<a href="{{ artwork.full_image_file_name }}" class="btn btn-sm btn-default" title="Download PNG"><i class="icon icon-arrow-down"></i>PNG</a>
		<a href="/images/svg/{{ artwork.key.id }}.svg" class="btn btn-sm btn-default" title="Download SVG"><i class="icon icon-arrow-down"></i>SVG</a>
		{% if user_info.superadmin %}
		<a href="/images/json/{{ artwork.key.id }}.json" class="btn btn-sm btn-default" title="Download JSON"><i class="icon icon-arrow-down"></i>JSON</a>
		<a href="#" id="admin-artwork-properties" class="btn btn-sm btn-default" title="Artwork properties">Properties</a>
		{% endif %}
	</div>
	
	
	<div class="delimiter"></div>
	
	<div class="image-details-comments">
		{% for comment in comments %}
		  <div class="comment">
		  	<div class="comment-header"><b>{{ comment.author.nickname }}</b> - {{ comment.date|date:"d M Y H:i" }}
		  		{% if user_info.superadmin %}
		  			<div class="pull-right">
		  				<a href="/delete-comment?id={{ comment.key }}" title="Delete comment"><i class="icon icon-remove"></i></a>
		  			</div>
		  		{% endif %}
		  	</div>
		  	<pre class="comment-text">{{ comment.text }}</pre>
		  </div>
		{% endfor %}
	</div>
	
	
	<div class="image-details-comment-add">
		<form name="f" role="form" method="POST" action="/save-comment" onsubmit="return onCommentSubmit();">
			<input type="hidden" name="artwork_id" value="{{ artwork.key.id }}" />
			<div class="form-group col-xs-12" style="padding-left: 0; padding-right: 0;">
				<textarea name="comment_text" class="form-control"></textarea>
			</div>
			<div class="form-group col-xs-12 text-right" style="padding-left: 0; padding-right: 0;">
				{% if user_info.user %}
				  <button type="submit" class="btn btn-primary">Add a comment</button>
				{% else %}
				  <a href="{{ user_info.login_url }}">Login into Google account to leave a comment</a>
				{% endif %}
			</div>
		</form>
	</div>
</div>
</div>


<div id="modal-confirm-delete" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Confirmation</h4>
      </div>
      <div class="modal-body">
        <p>One fine body</p>
      </div>
      <div class="modal-footer">
        <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
        <a href="#" id="btn-confirm-delete" class="btn btn-danger">Delete</a>
      </div>
    </div>
  </div>
</div>


<div id="modal-error" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Error</h4>
      </div>
      <div class="modal-body">
        <p>One fine body</p>
      </div>
      <div class="modal-footer">
        <a href="#" class="btn btn-default" data-dismiss="modal">Close</a>
      </div>
    </div>
  </div>
</div>



<script>
$(function() {
	$(".btn-delete-image").click(
		function() {
			var imageName=$("#artwork-name").text();
			$("#modal-confirm-delete .modal-body").html(
				"<p>Are you sure to delete image <i>'"+imageName+"'</i></p>");
			$("#btn-confirm-delete").attr("href","/delete-image?id="+$(this).attr("image-key"))
			$("#modal-confirm-delete").modal('show');
		}
	)
})

function showErrorDialog(message) {
	$("#modal-error .modal-body").html("<p>"+message+"</p>");
	$("#modal-error").modal();
}

function onCommentSubmit() {
	var commentText=$("textarea[name=comment_text]").val();
	if (!commentText) {
		showErrorDialog("Your comment is empty. Please enter your message and try again.");
		return false;
	}
	
	if (commentText.length>1000) {
		showErrorDialog("Your comment is too long. It cannot be more than 1000 characters.");
		return false;
	}
	
	
	return true;
}
</script>



{% if user_info.superadmin %}
<link href="/bootstrap-tagsinput/bootstrap-tagsinput.css" rel="stylesheet">
<script src="/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>


<div id="properties-modal" id="modal-confirm-delete" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Artwork properties</h4>
      </div>
      <div class="modal-body">
        <form name="adminForm" method="POST" action="/admin/saveArtworkProperties" role="form">
        	<input type="hidden" name="admin_artwork_id" value="{{ artwork.key.id }}" />
        	<div class="form-group">
    			<label>Artwork title</label>
    			<input type="text" name="admin_artwork_name" id="admin_artwork_name" value="{{ artwork.name }}" class="form-control"/>
    		</div>
    		<div class="form-group">
    			<label>Artwork description</label>
    			<textarea name="admin_artwork_description" id="admin_artwork_description" class="form-control" style="height:150px;">{{ artwork.description|default_if_none:"" }}</textarea>
    		</div>
    		<div class="form-group">
    			<label>Tags</label>
    			<div>
    				<input type="text" value="{{ artwork.tags_merged }}" name="admin_artwork_tags" id="admin_artwork_tags" autocomplete="off"/>
    			</div>
    		</div>
    		<div class="checkbox">
    			<label>
    				<input name="admin_artwork_editor_choice" type="checkbox" {% if artwork.editor_choice %}checked{% endif %}/> Editor's choice
    			</label>
    		</div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    	<button id="btn-admin-artwork-properties-save" type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script>
$(function() {
	var tags=$("#admin_artwork_tags");
	tags.tagsinput();
	tags.tagsinput('input').typeahead({
		name: "dataset",
		remote: "/tag-typeahead?query=%QUERY"
    }).bind('typeahead:selected', $.proxy(function (obj, datum) {
      tags.tagsinput('add', datum.value);
      tags.tagsinput('input').typeahead('setQuery', '');
    }, $('input')));
	
	
	$("#admin-artwork-properties").click(
		function() {
			$("#properties-modal").modal();
		})
		
	$("#btn-admin-artwork-properties-save").click(
		function() {
			$("form[name=adminForm]")[0].submit();	
		})
})
</script>


{% endif %}



{% endblock content %}